<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      img {
        width: 100%;
        height: 100%;
        display: block;
      }

      .box {
        width: 450px;

        margin: 50px;
        display: flex;
        flex-direction: column;

        position: relative;
      }

      .box > .show {
        width: 450px;
        height: 450px;
        border: 1px solid #333;
        position: relative;
      }

      .box > .show > .mask {
        width: 200px;
        height: 200px;
        background-color: yellow;
        opacity: 0.4;
        position: absolute;
        top: 0px;
        left: 0px;

        display: none;
      }

      .box > .list {
        width: 100%;
        flex: 1;

        display: flex;
        justify-content: flex-start;
        align-items: center;

        box-sizing: border-box;
        padding: 20px;
      }

      .box > .list > p {
        width: 54px;
        height: 54px;
        border: 1px solid #333;
        margin-right: 10px;
      }

      .box > .list > p.active {
        border-color: red;
      }

      .box > .enlarge {
        width: 400px;
        height: 400px;

        position: absolute;
        top: 0;
        left: 101%;

        background: url(./imgs/1.big.jpg) no-repeat;
        background-size: 800px 800px;
        background-position: 0 0;

        display: none;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <div class="show">
        <img src="./imgs/1.jpg" alt="" />
        <div class="mask"></div>
      </div>
      <div class="list">
        <p class="active">
          <img
            src="./imgs/1.small.jpg"
            showImg="./imgs/1.jpg"
            enlargeImg="./imgs/1.big.jpg"
            alt=""
          />
        </p>
        <p>
          <img
            src="./imgs/2.small.jpg"
            showImg="./imgs/2.jpg"
            enlargeImg="./imgs/2.big.jpg"
            alt=""
          />
        </p>
      </div>
      <div class="enlarge"></div>
    </div>
    <script>
      /* 
    分析需求：1、鼠标移入 遮罩层和 放大图都需要显示，鼠标移除的时候 遮罩层和放大图隐藏
             2、鼠标在移动的时候遮罩层要跟着鼠标动 （鼠标的中间动）（边界问题）
             3、放大图也要按照左边比例来移动
             4、鼠标移到小图上可以切换图片
     */

      /* 
       研究对象：放大镜对象；
        属性和方法：
                属性：外层容器；
                    （属性：show  、 mask 、enlargeEle 、....）
                方法：移入移除方法、 移动move方法 、切换图片....
    
    */

      // 放大镜类；
      // 定义
      function Enlarge(containerEle) {
        this.boxEle = containerEle;
        this.showEle = containerEle.querySelector(".show");
        this.maskEle = containerEle.querySelector(".mask");
        this.enlargeEle = containerEle.querySelector(".enlarge");
        this.psEle = containerEle.querySelectorAll(".list p");
        this.imgEle = containerEle.querySelector(".show img");
        this.enterOrLeave();
        this.moveFn();
      }

      // 移入移除
      Enlarge.prototype.enterOrLeave = function () {
        this.showEle.onmouseenter = () => {
          this.maskEle.style.display = "block";
          this.enlargeEle.style.display = "block";
        };
        this.showEle.onmouseleave = () => {
          console.log(111);
          this.maskEle.style.display = "none";
          this.enlargeEle.style.display = "none";
        };
      };

      // 移动方法
      Enlarge.prototype.moveFn = function () {
        var that = this;
        this.showEle.onmousemove = function (e) {
          // var x = e.offsetX;  //相对于元素自身的偏移量；
          // var y = e.offsetY;
          // console.log(this.offsetLeft);

          var x =
            e.clientX - that.boxEle.offsetLeft - that.maskEle.offsetWidth / 2;
          var y =
            e.clientY - that.boxEle.offsetTop - that.maskEle.offsetHeight / 2;

          // 边界判断；
          // 左边判断
          if (x < 0) {
            x = 0;
          }
          // 右边判断
          if (x > this.offsetWidth - that.maskEle.offsetWidth) {
            x = this.offsetWidth - that.maskEle.offsetWidth;
          }

          // 上边边界

          if (y < 0) {
            y = 0;
          }

          // 下边边界
          if (y > this.offsetHeight - that.maskEle.offsetHeight) {
            y = this.offsetHeight - that.maskEle.offsetHeight;
          }

          // 获取enlarge的背景图的宽和高；

          var bgSize = getComputedStyle(that.enlargeEle, null)[
            "background-size"
          ];
          console.log(bgSize);
          var arr = bgSize.split(" ");
          var wNum = parseInt(arr[0]); //背景图的宽
          var hNum = parseInt(arr[1]); //背景图的高；

          // 获取x距离
          var xx = (that.maskEle.offsetLeft / this.offsetWidth) * wNum;
          var yy = (that.maskEle.offsetTop / this.offsetHeight) * hNum;
          console.log(xx, yy);
          that.enlargeEle.style.backgroundPosition = `-${xx}px -${yy}px`;
          // console.log(x,y);
          that.maskEle.style.left = x + "px";
          that.maskEle.style.top = y + "px";
        };
      };

      // 放大镜加上切换方法；
      Enlarge.prototype.switchPic = function () {
        this.psEle.forEach((item, key) => {
          item.onclick = () => {
            this.psEle.forEach((item, k) => {
              if (k == key) {
                item.classList.add("active");
              } else {
                item.classList.remove("active");
              }
            });

            // console.log(key);
            // 替换上面的图像；
            this.imgEle.src = `./imgs/${key + 1}.jpg`;
            // 切换右边的大图；
            this.enlargeEle.style.backgroundImage = `url(./imgs/${
              key + 1
            }.big.jpg)`;
          };
        });
      };

      // 调用
      var boxEle = document.querySelector(".box");
      var obj = new Enlarge(boxEle);
      obj.switchPic();

      // 获取show 的元素
      // var showEle = document.querySelector(".show");
      // // 获取遮罩层
      // var maskEle = document.querySelector(".mask");
      // // 获取放大区域
      // var enlargeEle = document.querySelector(".enlarge");

      // // 获取box元素
      // var boxEle = document.querySelector(".box");
      // showEle.onmouseenter = function () {
      //   maskEle.style.display = "block";
      //   enlargeEle.style.display = "block";
      // }

      // showEle.onmouseleave = function () {
      //   console.log(111);
      //   maskEle.style.display = "none";
      //   enlargeEle.style.display = "none";
      // }

      // 遮罩层跟随鼠标移动；

      // showEle.onmousemove = function (e) {
      //   // var x = e.offsetX;  //相对于元素自身的偏移量；
      //   // var y = e.offsetY;
      //   // console.log(this.offsetLeft);

      //   var x = e.clientX - boxEle.offsetLeft - maskEle.offsetWidth / 2;
      //   var y = e.clientY - boxEle.offsetTop - maskEle.offsetHeight / 2;

      //   // 边界判断；
      //   // 左边判断
      //   if (x < 0) {
      //     x = 0;
      //   }
      //   // 右边判断
      //   if (x > this.offsetWidth - maskEle.offsetWidth) {
      //     x = this.offsetWidth - maskEle.offsetWidth
      //   }

      //   // 上边边界

      //   if (y < 0) {
      //     y = 0;
      //   }

      //   // 下边边界
      //   if (y > this.offsetHeight - maskEle.offsetHeight) {
      //     y = this.offsetHeight - maskEle.offsetHeight
      //   }

      //   // 获取enlarge的背景图的宽和高；

      //   var bgSize = getComputedStyle(enlargeEle, null)['background-size'];
      //   console.log(bgSize)
      //   var arr = bgSize.split(" ");
      //   var wNum = parseInt(arr[0]);  //背景图的宽
      //   var hNum = parseInt(arr[1]); //背景图的高；

      //   // 获取x距离
      //   var xx = (maskEle.offsetLeft / this.offsetWidth) * wNum;
      //   var yy = (maskEle.offsetTop / this.offsetHeight) * hNum;
      //   console.log(xx, yy);
      //   enlargeEle.style.backgroundPosition = `-${xx}px -${yy}px`;
      //   // console.log(x,y);
      //   maskEle.style.left = x + "px";
      //   maskEle.style.top = y + "px";
      // }

      // 点击小图切换 对应的图像
      // var psEle = document.querySelectorAll(".list p");
      // var imgEle = document.querySelector(".show img");
      // psEle.forEach((item, key) => {
      //   item.onclick = function () {
      //     psEle.forEach((item, k) => {
      //       if (k == key) {
      //         item.classList.add("active");
      //       } else {
      //         item.classList.remove("active");
      //       }

      //     })

      //     // console.log(key);
      //     // 替换上面的图像；
      //     imgEle.src = `./imgs/${key + 1}.jpg`;
      //     // 切换右边的大图；
      //     enlargeEle.style.backgroundImage = `url(./imgs/${key + 1}.big.jpg)`;
      //   }
      // })
    </script>
  </body>
</html>
